@import './base.less';

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  user-select: none;
  box-sizing: border-box;
  outline: none;
}

html,
body {
  height: 100%;
  background-color: var(--color-body-bg);
}

#app {
  height: 100%;
  overflow: hidden;
}

#app,
input {
  font-family:
    'Barlow',
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Helvetica Neue,
    PingFang SC,
    Microsoft YaHei,
    Source Han Sans SC,
    Noto Sans CJK SC,
    WenQuanYi Micro Hei,
    sans-serif,
    microsoft uighur;
}

select,
button {
  font-family: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  user-select: none;
}

input,
button {
  &:focus {
    outline: none;
  }
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

// button按钮

button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  background: transparent;
  margin: 4px;
  border-radius: 25%;
  transition: 0.2s;

  &:first-child {
    margin-left: 0;
  }

  &:hover {
    background: var(--color-secondary-bg-for-transparent);
  }

  &:active {
    transform: scale(0.92);
  }

  .svg-icon {
    color: var(--color-text);
    height: 20px;
    width: 20px;
  }
}

// 滚动条

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-body-bg);
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(128, 128, 128, 0.38);
}

[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background: var(--color-secondary-bg);
}

// vue-slider-component组件
.vue-slider-rail {
  background-color: hsla(0, 0%, 100%, 0.18) !important;
}

.vue-slider-process {
  background-color: #fafafa !important;
}

.vue-slider-dot-tooltip-inner {
  background: var(--color-text) !important;
  color: var(--color-body-bg) !important;
  border-color: var(--color-text) !important;
}
